<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>结算页面</title>
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="../css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="../css/jsstyle.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../js/address.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>

	<body>

		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd" id="indexHeader">
							
						</div>
					</div>
				</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd">
						<a href="#" target="_top" class="h">商城首页</a>
					</div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng">
						<a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
					</div>
				</div>
				<!--<div class="topMessage mini-cart">
					<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
				</div>
				<div class="topMessage favorite">
					<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>-->
			</ul>
		</div>

		<!--悬浮搜索框-->
		<div class="nav white">
			<div class="logo"><img src="../images/logo.png" /></div>
			<div class="logoBig">
				<li><img src="../images/logobig.png" /></li>
			</div>
		</div>

		<div class="clear"></div>
		<div class="concent">
			<!--地址 -->
			<div class="paycont">
				<div class="address">
					<h3>确认收货地址 </h3>
					<div class="control">
						<div class="tc-btn createAddr theme-login am-btn am-btn-danger">填写地址</div>
					</div>
					<div class="clear"></div>
					<ul id="showAddress">
						<li class="user-addresslist defaultAddr">

							<div class="address-left">
								<div class="user DefaultAddr">
									<span class="buy-address-detail">   
                   					<span class="buy-user"> </span>
									<span class="buy-phone"></span>
									</span>
								</div>
								<div class="default-address DefaultAddr">
									<span class="buy-line-title buy-line-title-type">收货地址：</span>
									<span class="buy--address-detail">
										<span class="street"></span>
									</span>
								</div>
							</div>
							<div class="address-right">
								<a href="../person/address.html">
									<span class="am-icon-angle-right am-icon-lg"></span></a>
							</div>
							<div class="clear"></div>

							<div class="new-addr-btn">
								<a href="#" class="hidden">设为默认</a>
								<span class="new-addr-bar hidden">|</span>
								<!--<a href="#">编辑</a>
								<span class="new-addr-bar">|</span>
								<a href="javascript:void(0);" onclick="delClick(this);">删除</a>-->
							</div>

						</li>
					</ul>
					<div class="clear"></div>
				</div>
				<!--物流 -->
				<!--<div class="logistics">
					<h3>选择物流方式</h3>
					<ul class="op_express_delivery_hot">
						<li data-value="yuantong" class="OP_LOG_BTN  "><i class="c-gap-right" style="background-position:0px -468px"></i>圆通<span></span></li>
						<li data-value="shentong" class="OP_LOG_BTN  "><i class="c-gap-right" style="background-position:0px -1008px"></i>申通<span></span></li>
						<li data-value="yunda" class="OP_LOG_BTN  "><i class="c-gap-right" style="background-position:0px -576px"></i>韵达<span></span></li>
						<li data-value="zhongtong" class="OP_LOG_BTN op_express_delivery_hot_last "><i class="c-gap-right" style="background-position:0px -324px"></i>中通<span></span></li>
						<li data-value="shunfeng" class="OP_LOG_BTN  op_express_delivery_hot_bottom"><i class="c-gap-right" style="background-position:0px -180px"></i>顺丰<span></span></li>
					</ul>
				</div>-->
				<div class="clear"></div>

				<!--支付方式-->
				<!--<div class="logistics">
					<h3>选择支付方式</h3>
					<ul class="pay-list">
						<li class="pay taobao"><img src="../images/zhifubao.jpg"/></li>
						<li class="pay card"><img src="../images/wangyin.jpg" />银联<span></span></li>
						<li class="pay qq"><img src="../images/weizhifu.jpg" />微信<span></span></li>
					</ul>
				</div>
				<div class="clear"></div>-->

				<!--订单 -->
				<div class="concent">
					<div id="payTable">
						<h3>确认订单信息</h3>
						<div class="cart-table-th">
							<div class="wp">

								<div class="th th-item">
									<div class="td-inner">商品信息</div>
								</div>
								<div class="th th-price">
									<div class="td-inner">单价</div>
								</div>
								<div class="th th-amount">
									<div class="td-inner">数量</div>
								</div>
								<div class="th th-sum">
									<div class="td-inner">金额</div>
								</div>
							</div>
						</div>
						<div class="clear"></div>

						<tr class="item-list">
							<div class="bundle  bundle-last">

								<div class="bundle-main">
									<ul class="item-content clearfix">
										<div class="pay-phone">
											<li class="td td-item">
												<div class="item-pic">
													<a href="#" class="J_MakePoint">
														<img src="" class="itempic J_ItemImg"></a>
												</div>
												<div class="item-info">
													<div class="item-basic-info">
														<a href="#" id="goodsname" class="item-title J_MakePoint" data-point="tbcart.8.11"></a>
													</div>
												</div>
											</li>
											<li class="td td-info">
												<div class="item-props">
													<span class="sku-line"></span>
												</div>
											</li>
											<li class="td td-price">
												<div class="item-price price-promo-promo">
													<div class="price-content">
														<em class="J_Price price-now" id="price"></em>
														<input type="text" id="hidePrice" hidden/>
													</div>
												</div>
											</li>
										</div>
										<li class="td td-amount">
											<div class="amount-wrapper ">
												<div class="item-amount ">
													<span class="phone-title">购买数量</span>
													<div class="sl">
														<input class="min am-btn" name="" type="button" value="-" />
														<input id="goodsNum" class="text_box" name="" type="text" value="1" style="width:30px;" />
														<input class="add am-btn" name="" type="button" value="+" />
													</div>
												</div>
											</div>
										</li>
										<li class="td td-sum">
											<div class="td-inner">
												<em tabindex="0" id="totalPrice" class="J_ItemSum number"></em>
											</div>
										</li>

									</ul>
									<div class="clear"></div>

								</div>
						</tr>
						<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
					<div class="pay-total">
						<!--信息 -->
						<div class="order-go clearfix">
							<div class="pay-confirm clearfix">
								<div class="box">
									<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
										<span class="price g_price ">
                                    <span>¥</span> <em class="style-large-bold-red " id="J_ActualFee"></em>
										</span>
									</div>

									<div id="holyshit268" class="pay-address">

									</div>
								</div>

								<div id="holyshit269" class="submitOrder">
									<div class="go-btn-wrap">
										<a id="J_Go" onclick="submitOrder()" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
									</div>
								</div>
								<div class="clear"></div>
							</div>
						</div>
					</div>

					<div class="clear"></div>
				</div>
			</div>
			<div class="footer" style="border-top: 1px solid #B0B0B0;">
				<div class="footer-bd">
					<p>
						<a href="#">关于</a>
						<a href="#">合作</a>
						<a href="#">联系我们</a>
						<a href="#">网站地图</a>
					</p>
				</div>
			</div>
		</div>
		<div class="theme-popover-mask"></div>
		<div class="theme-popover">

			<!--标题 -->
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add address</small></div>
			</div>
			<hr/>

			<div class="am-u-md-12">
				<form class="am-form am-form-horizontal">

					<div class="am-form-group">
						<label for="user-name" class="am-form-label">收货人</label>
						<div class="am-form-content">
							<input type="text" id="user-name" placeholder="收货人">
						</div>
					</div>

					<div class="am-form-group">
						<label for="user-phone" class="am-form-label">手机号码</label>
						<div class="am-form-content">
							<input id="user-phone" placeholder="手机号必填" type="email">
						</div>
					</div>

					<div class="am-form-group">
						<label for="user-intro" class="am-form-label">详细地址</label>
						<div class="am-form-content">
							<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
							<small>100字以内写出你的详细地址...</small>
						</div>
					</div>

					<div class="am-form-group theme-poptit">
						<div class="am-u-sm-9 am-u-sm-push-3">
							<div class="am-btn am-btn-danger" onclick="saveAddress()">保存</div>
							<div class="am-btn am-btn-danger close">取消</div>
						</div>
					</div>
				</form>
			</div>

		</div>

		<div class="clear"></div>
		<script>
			function getQueryStringByName(name) {
		        var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		        if (result == null || result.length < 1) {
		            return "";
		        }
		        return result[1];
		    }
			
			$(function(){
				/*检验用户是否登录*/
				if (getCookie("username") == null || getCookie("userid") == null) {
                    $("#indexHeader").append(`
                    		<a href="/portal/home/login.html" target="_top" class="h">亲，请登录</a>
                            <a href="/portal/home/register.html" target="_top">免费注册</a>`);
			    }else{
			    	$("#indexHeader").append(`
                            <a href="#" target="_top" class="h">您好，${getCookie("username")}</a>`
                    );
			    }
			})
			
			$(function(){
				var goodsid=getQueryStringByName("goodsid");
				var num=getQueryStringByName("num");
				$("#goodsNum").val(num);
				
				//加
				$(".add").click(function(){
		          var t=$(this).parent().find('input[class*=text_box]');
		          t.val(parseInt(t.val())+1)
		          var price= $("#hidePrice").val();
		          var totalPrice=(t.val()*price).toFixed(2);
		          $("#totalPrice").text(totalPrice);
		          $("#J_ActualFee").text(totalPrice);
		        })
				//减
				$(".min").click(function(){
			         var t=$(this).parent().find('input[class*=text_box]');
			         t.val(parseInt(t.val())-1)
			         if(parseInt(t.val())<1){
			           t.val(1);
			         }
			         var price= $("#hidePrice").val();
		             var totalPrice=(t.val()*price).toFixed(2);
		             $("#totalPrice").text(totalPrice);
		             $("#J_ActualFee").text(totalPrice);
			    })
				
				
				/*查询商品信息*/
				$.ajax({
					type:"get",
					url:"/goods/info/"+goodsid,
					async:true,
					success:function(result){
						$("#goodsname").text(result.data.goodsname);
						$("#price").text(result.data.price);
						$("#hidePrice").val(result.data.price);
						var totalPrice=num*result.data.price;
						$("#totalPrice").text(totalPrice);
						$("#J_ActualFee").text(totalPrice);
						$(".itempic J_ItemImg").attr("src",result.data.img1);
					}
				});
			})
			
			/*保存地址*/
			function saveAddress(){
				var recipient=$("#user-name").val();
				var tel=$("#user-phone").val();
				var address=$("#user-intro").val();
				$('.theme-popover-mask').hide();
				$(".theme-popover").hide();
				$(document.body).css("overflow","");
				$(".buy-user").text(recipient);
				$(".buy-phone").text(tel);
				$(".street").text(address);
			}
			
			/*提交订单*/
			function submitOrder(){
				//商品id
				var goodsid=getQueryStringByName("goodsid");
				//商品名称
				var goodsname=$("#goodsname").text();		
				//买家id
				var buyerid=getCookie("userid");
				//收件地址
				var address=$(".street").text();
				//手机号
				var tel=$(".buy-phone").text();
				//收件人
				var recipient=$(".buy-user").text();
				//订单总额
				var totalPrice=$("#totalPrice").text();
				//商品数量
				var num=$("#goodsNum").val();
				
				if(address==''||tel==""||recipient==''){
					alert("请将收货信息填写完整");
					return;
				}
				
				var orderData={"goodsid":goodsid,"buyerid":buyerid,"address":address,
				              "goodsname":goodsname,"num":num,"tel":tel,"recipient":recipient};
				
				$.ajax({
					type:"post",
					url:"/orders/insert",
					async:true,
					data:JSON.stringify(orderData),
					contentType: "application/json;charset=utf-8",
					dataType: "json",
					success:function(result){
						if(result.resultCode == 200) {
							window.location.href="success.html";
						}else{
							alert(result.message);
							return;
						}
					}
				});
			}
		</script>
	</body>

</html>